<!--刘川中-->
<!--2017/12/22-->
<template>
  <section>
    <!--步骤条 start-->
    <el-row>
      <!--步骤条加载中-->
      <div>
        <el-steps :active="1" simple style="background: #fff" v-loading="visible.listLoading"
                  v-if="refundDetail.refund_service_status === -1">
          <el-step title="申请中" description="2017-12-12" status="success" name="123" icon="el-icon-loading"></el-step>
          <el-step title="审核中" status="wait" icon="el-icon-time"></el-step>
          <el-step title="待寄货" status="wait" icon="el-icon-time"></el-step>
          <el-step title="待收货" status="wait" icon="el-icon-time"></el-step>
        </el-steps>
      </div>
      <!--退款步骤条-->
      <div>
        <el-steps :active="refundDetail.refund_service_status" simple style="background: #fff" v-loading="visible.listLoading"
                  v-if="refundDetail.refund.refund_type === 1">
          <el-step title="申请中" :status="getStepStatus(1)" :icon="getStepIcon(1)"></el-step>
          <el-step title="审核中" :status="getStepStatus(2)" :icon="getStepIcon(2)"></el-step>
        </el-steps>
      </div>
      <!--退款退货步骤条-->
      <div>
        <el-steps :active="refundDetail.refund_service_status" simple style="background: #fff" v-loading="visible.listLoading"
                  v-if="refundDetail.refund.refund_type === 2">
          <el-step title="申请中" :status="getStepStatus(1)" :icon="getStepIcon(1)"></el-step>
          <el-step title="审核中" :status="getStepStatus(2)" :icon="getStepIcon(2)"></el-step>
          <el-step title="待寄货" :status="getStepStatus(3)" :icon="getStepIcon(3)"></el-step>
          <el-step title="待收货" :status="getStepStatus(4)" :icon="getStepIcon(4)"></el-step>
        </el-steps>
      </div>
    </el-row>
    <!--步骤条 end-->
    <el-row style="background: transparent">
      <el-col :span="18" class="color-blue">
        <h3 style="font-weight: 500; font-size: 18px">
          <i class="el-icon-info"></i> 当前服务状态 : {{refundDetail.refund.refund_status}}</h3>
      </el-col>
      <el-col :span="6" class="pt-3" v-if="refundDetail.refund.refund_type === 1 && refundDetail.refund_service_status === 1" style="text-align: right">
        <el-button type="default" @click.native="refuseToRefund(refundDetail.service_status[1])">拒绝退款</el-button>
        <el-button type="primary" @click.native="agreeRefund(refundDetail.service_status[0])">同意退款</el-button>
      </el-col>
      <el-col :span="6" class="pt-3" v-if="refundDetail.refund.refund_type === 2 && refundDetail.refund_service_status === 1 &&
                                           refundDetail.refund_status !== 2 && refundDetail.refund_status !== 5 && refundDetail.refund_status !== 6" style="text-align: right">
        <el-button type="default" @click.native="rejectReturns(refundDetail.service_status[1])">拒绝退货</el-button>
        <el-button type="primary" @click.native="agreeReturns(refundDetail.service_status[0])">同意退货</el-button>
      </el-col>
      <!--待寄货操作-->
      <el-col :span="6" class="pt-3" v-if="refundDetail.refund.refund_type === 2 && refundDetail.refund_service_status === 3 &&
                                           refundDetail.refund_status !== 2 && refundDetail.refund_status !== 5 && refundDetail.refund_status !== 6" style="text-align: right">
        <el-button type="default" @click.native="rejectReturns(refundDetail.service_status[0])">拒绝退货</el-button>
        <!--<el-button type="primary" @click.native="agreeReturns(refundDetail.service_status[0])">同意退货</el-button>-->
      </el-col>
      <!--待收货操作-->
      <el-col :span="6" class="pt-3" v-if="refundDetail.refund.refund_type === 2 && refundDetail.refund_service_status === 4 &&
                                           refundDetail.refund_status !== 2 && refundDetail.refund_status !== 5 && refundDetail.refund_status !== 6" style="text-align: right">
        <el-button type="default" @click.native="cancelRefund(refundDetail.service_status[1])">取消退货</el-button>
        <el-button type="primary" @click.native="confirmReceiptAndRefund(refundDetail.service_status[0])">确认收货并退款</el-button>
      </el-col>
    </el-row>
    <!--订单信息 start-->
    <el-row class="p-30" v-loading="visible.listLoading">
      <p class="info-title">订单信息</p>
      <el-row class="p-30">
        <el-col :span="24" class="info-col">
          <el-col :span="2">订单编号</el-col>
          <el-col :span="22">
            <router-link class="color-blue" to="'/order/' + refundDetail.order.order_no" title="查看订单详情">
              {{refundDetail.order.order_no}}
            </router-link>
          </el-col>
        </el-col>
        <el-col :span="24" class="info-col mt-4">
          <el-col :span="2">下单时间</el-col><el-col :span="22">{{refundDetail.order.created_at}}</el-col>
        </el-col>
        <el-col :span="24" class="info-col mt-4">
          <el-col :span="2">订单类型</el-col><el-col :span="22">{{refundDetail.order.order_type}}</el-col>
        </el-col>
        <el-col :span="24" class="info-col mt-4">
          <el-col :span="2">支付方式</el-col><el-col :span="22">{{refundDetail.order.order_pay_method}}</el-col>
        </el-col>
        <el-col :span="24" class="info-col mt-4">
          <el-col :span="2">订单来源</el-col><el-col :span="22">{{refundDetail.order.order_source}}</el-col>
        </el-col>
        <el-col :span="24" class="info-col mt-4">
          <el-col :span="2">订单状态</el-col><el-col :span="22">{{refundDetail.order.order_status}}</el-col>
        </el-col>
        <el-col :span="24" class="info-col mt-4">
          <el-col :span="2">用户账号</el-col>
          <el-col :span="22">
            <router-link class="color-blue" to="'/user/' + refundDetail.order.user_id" title="查看用户详情">
              {{refundDetail.user.user_no}}</router-link>
          </el-col>
        </el-col>
      </el-row>
    </el-row>
    <!--订单信息 end-->
    <!--退款信息 start-->
    <el-row class="p-30 mt-4" v-loading="visible.listLoading">
      <p class="info-title">退款信息</p>
      <el-row class="p-30">
        <el-col :span="24" class="info-col">
          <el-col :span="2">退款单号</el-col><el-col :span="22">{{refundDetail.refund.order_refund_id}}</el-col>
        </el-col>
        <el-col :span="24" class="info-col mt-4">
          <el-col :span="2">退款金额</el-col><el-col :span="22">{{refundDetail.refund.refund_total}}</el-col>
        </el-col>
        <el-col :span="24" class="info-col mt-4">
          <el-col :span="2">申请时间</el-col><el-col :span="22">{{refundDetail.refund.created_at}}</el-col>
        </el-col>
        <el-col :span="24" class="info-col mt-4">
          <el-col :span="2">退款类型</el-col><el-col :span="22">{{refundDetail.refund.refund_type}}</el-col>
        </el-col>
        <el-col :span="24" class="info-col mt-4">
          <el-col :span="2">联系人</el-col><el-col :span="22">{{refundDetail.user.user_name}}</el-col>
        </el-col>
        <el-col :span="24" class="info-col mt-4">
          <el-col :span="2">联系电话</el-col><el-col :span="22">{{refundDetail.order.receive_phone}}</el-col>
        </el-col>
        <el-col :span="24" class="info-col mt-4">
          <el-col :span="2">是否收到货</el-col>
          <el-col :span="22">{{ (refundDetail.order.order_status === 3 || refundDetail.order.order_status === 4) ? '是' : '否' }}</el-col>
        </el-col>
        <el-col :span="24" class="info-col mt-4">
          <el-col :span="2">服务状态</el-col><el-col :span="22">{{refundDetail.refund.refund_status}}</el-col>
        </el-col>
        <el-col :span="24" class="info-col mt-4">
          <el-col :span="2">退款原因</el-col><el-col :span="22">{{refundDetail.refund.refund_cause}}</el-col>
        </el-col>
        <el-col :span="24" class="info-col mt-4">
          <el-col :span="2">问题描述</el-col><el-col :span="22">{{refundDetail.refund.refund_bewrite}}</el-col>
        </el-col>
        <el-col :span="24" class="info-col mt-4">
          <el-col :span="2">凭证</el-col>
          <el-col :span="22" class="clearfix">
            <a :href="item.order_refund_image_path" target="_blank" v-for="(item, index) in refundDetail.refund_image" :key="index" >
              <img :src="item.order_refund_image_path" alt=""
                   :class="index===0?'':'ml-3'" style="display: block; float: left; width: 110px">
            </a>
          </el-col>
        </el-col>
      </el-row>
    </el-row>
    <!--退款信息 end-->
    <!--退货商品 start-->
    <el-row class="p-30 mt-4" v-loading="visible.listLoading" v-if="refundDetail.refund.refund_type === 2">
      <p class="info-title">退货商品</p>
      <el-table :data="refundDetail.product" :highlight-current-row="true" v-loading="visible.listLoading">
        <el-table-column prop="fullImage" label="商品图片" width="" align="center">
          <template slot-scope="scope">
            <img :src="scope.row.fullImage" alt="" style="display: block; width: 60px; height: 60px">
          </template>
        </el-table-column>
        <el-table-column prop="product_name" label="商品名称" sortable width="" align="center"></el-table-column>
        <el-table-column prop="user_id" label="SKU码" sortable width="" align="center"></el-table-column>
        <el-table-column prop="user_id" label="规格" sortable width="" align="center"></el-table-column>
        <el-table-column prop="product_price" label="价格" sortable width="" align="center"></el-table-column>
        <el-table-column prop="user_id" label="优惠金额" sortable width="" align="center"></el-table-column>
        <el-table-column prop="product_salenum" label="数量" sortable width="" align="center"></el-table-column>
        <el-table-column prop="user_id" label="小计" sortable width="" align="center"></el-table-column>
      </el-table>
      <p style="font-size: 16px">总计 : ￥335.00（含运费 : ￥20.00）</p>
    </el-row>
    <!--退货商品 end-->
    <!--退货详情 start-->
    <el-row class="p-30" v-loading="visible.listLoading" v-if="refundDetail.refund.refund_type === 2">
      <p class="info-title">退货详情</p>
      <el-row class="p-30">
        <el-col :span="24" class="info-col mt-4">
          <el-col :span="2">物流公司</el-col><el-col :span="22">{{refundDetail.order.created_at}}</el-col>
        </el-col>
        <el-col :span="24" class="info-col mt-4">
          <el-col :span="2">快递编号</el-col>
          <el-col :span="22">{{refundDetail.order.order_type}} <a href="javascript:" class="color-blue" @click="showLogistics">查看物流</a></el-col>
        </el-col>
        <el-col :span="24" class="info-col mt-4">
          <el-col :span="2">运单填写时间</el-col><el-col :span="22">{{refundDetail.order.order_pay_method}}</el-col>
        </el-col>
        <el-col :span="24" class="info-col mt-4">
          <el-col :span="2">退货地址</el-col><el-col :span="22">{{refundDetail.order.order_source}}</el-col>
        </el-col>
      </el-row>
    </el-row>
    <!--退货详情 end-->
    <!--操作记录 start -->
    <el-row class="p-30 mt-4" v-loading="visible.listLoading">
      <p class="info-title">操作记录</p>
      <el-table :data="refundDetail.logs" :highlight-current-row="true" v-loading="visible.listLoading">
        <el-table-column prop="operator_name" label="处理人" sortable width="" align="center"></el-table-column>
        <el-table-column prop="created_at" label="操作时间" sortable width="" align="center"></el-table-column>
        <el-table-column prop="refund_status" label="操作" sortable width="" align="center"></el-table-column>
        <el-table-column prop="comment" label="备注信息" sortable width="" align="center"></el-table-column>
      </el-table>
    </el-row>
    <!--操作记录 end -->

    <!--物流信息-->
    <el-dialog title="" :visible.sync="visible.logisticsForm" min-width="400" width="35%">
      <div slot="title" class="dialog-title">物流信息</div>
      <div style="padding-left: 30px; min-height: 100px" v-loading="visible.logisticsLoading">
        <ul class="logistics-list clearfix" v-if="logisticsList.length > 0">
          <li class="" v-for="(item, index) in logisticsList" :key="index">
            <p class="logistics-title">{{ item.title }}</p>
            <p class="logistics-time">{{ item.time }}</p>
          </li>
        </ul>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click.native="visible.logisticsForm = false">确定</el-button>
      </div>
    </el-dialog>
  </section>
</template>
<script>
  // import utils from '../../common/js/util'
  import { getRefundDetail, editRefundStatus } from '../../api/api'
  import { mapGetters } from 'vuex'
  export default {
    data () {
      return {
        refundDetail: {
          order: {},
          product: [],
          refund: {},
          user: {},
          logs: [],
          refund_service_status: -1
        },
        refundStatusTypes: [],
        refundList: [],
        timeValues: [],
        page: 1,
        pagination: {
          total: 0
        },
        visible: {
          listLoading: false,
          logisticsForm: false,
          logisticsLoading: false
        },
        editRefund: {
          id: this.$router.history.current.params.id,
          refund_status: 1,
          comment: '',
          type: 'refund_status'
        },
        logisticsList: []
      }
    },
    computed: {
      ...mapGetters([
        'orderType'
      ])
    },
    methods: {
      // 获取列表
      handleList () {
        if (this.visible.listLoading) return
        this.visible.listLoading = true
        getRefundDetail(this.$router.history.current.params.id).then(res => {
          this.visible.listLoading = false
          if (res.status === 1) {
            this.refundDetail = res.data
            console.log(this.refundDetail);
          }
        })
      },
      // 步骤条状态
      getStepStatus (status) {
        if (this.refundDetail.refund_service_status === status) {
          return 'progress'
        } else if (this.refundDetail.refund_service_status > status) {
          return 'success'
        } else {
          return 'wait'
        }
      },
      // 步骤条图标
      getStepIcon (status) {
        if (this.refundDetail.refund_service_status === status) {
          return 'el-icon-loading'
        } else if (this.refundDetail.refund_service_status > status) {
          return 'el-icon-circle-check-outline'
        } else {
          return 'el-icon-time'
        }
      },
      // 拒绝退货
      rejectReturns (status) {
        // return this.testStatus()
        var that = this;
        this.editRefund.refund_status = status
        this.editRefund.comment = ''
        this.$prompt('请填写拒绝退货的原因', '拒绝退货', {
          inputPlaceholder: '说明原因最多30个汉字',
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          beforeClose (action, instance, done) {
            if (action === 'cancel') {
              instance.close()
              return
            }
            if (instance.inputValue === null || instance.inputValue === '') {
              instance.editorErrorMessage = '说明原因不能为空'
            } else if (!/^[\u4E00-\u9FA5]{1,30}$|^[A-Za-z]{1,60}$/.test(instance.inputValue)) {
              instance.editorErrorMessage = '说明原因最多30个汉字'
            } else {
              instance.editorErrorMessage = ''
              instance.confirmButtonLoading = true
              that.editRefund.comment = instance.inputValue
              editRefundStatus(that.editRefund).then(res => {
                instance.confirmButtonLoading = false
                if (res.status === 1) {
                  this.$message({
                    message: '拒绝退货成功',
                    type: 'success'
                  })
                  done()
                } else {
                  this.$message({
                    message: '拒绝退货失败',
                    type: 'error'
                  })
                }
              })
            }
          }
        }).then(({ value }) => {
          this.handleList()
        }).catch(() => {});
      },
      // 同意退货
      agreeReturns (status) {
        this.editRefund.refund_status = status
        this.editRefund.comment = ''
        this.$confirm('确认同意用户退货吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then((value) => {
          editRefundStatus(this.editRefund).then(res => {
            if (res.status === 1) {
              this.$message({
                message: '同意退货成功',
                type: 'success'
              })
              this.handleList()
            } else {
              this.$message({
                message: '同意退货失败',
                type: 'error'
              })
            }
          })
        }).catch(() => {})
      },
      // 拒绝退款
      refuseToRefund (status) {
        var that = this;
        this.editRefund.refund_status = status
        this.editRefund.comment = ''
        this.$prompt('请填写拒绝退款的原因', '拒绝退款', {
          inputPlaceholder: '说明原因最多30个汉字',
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          beforeClose (action, instance, done) {
            if (action === 'cancel') {
              instance.close()
              return
            }
            if (instance.inputValue === null || instance.inputValue === '') {
              instance.editorErrorMessage = '说明原因不能为空'
            } else if (!/^[\u4E00-\u9FA5]{1,30}$|^[A-Za-z]{1,60}$/.test(instance.inputValue)) {
              instance.editorErrorMessage = '说明原因最多30个汉字'
            } else {
              instance.editorErrorMessage = ''
              instance.confirmButtonLoading = true
              that.editRefund.comment = instance.inputValue
              editRefundStatus(that.editRefund).then(res => {
                instance.confirmButtonLoading = false
                if (res.status === 1) {
                  this.$message({
                    message: '拒绝退款成功',
                    type: 'success'
                  })
                  done()
                } else {
                  this.$message({
                    message: '拒绝退款失败',
                    type: 'error'
                  })
                }
              })
            }
          }
        }).then(({ value }) => {
          this.handleList()
        }).catch(() => {});
      },
      // 同意退款
      agreeRefund (status) {
        this.editRefund.refund_status = status
        this.editRefund.comment = ''
        this.$confirm('确认同意用户退款吗？', '同意退款', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then((value) => {
          editRefundStatus(this.editRefund).then(res => {
            if (res.status === 1) {
              this.$message({
                message: '退款成功',
                type: 'success'
              })
              this.handleList()
            } else {
              this.$message({
                message: '退款失败',
                type: 'error'
              })
            }
          })
        }).catch(() => {})
      },
      // 取消退货
      cancelRefund (status) {
        var that = this;
        this.editRefund.refund_status = status
        this.editRefund.comment = ''
        this.$prompt('请填写取消退货的原因', '取消退货', {
          inputPlaceholder: '说明原因最多30个汉字',
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          beforeClose (action, instance, done) {
            if (action === 'cancel') {
              instance.close()
              return
            }
            if (instance.inputValue === null || instance.inputValue === '') {
              instance.editorErrorMessage = '说明原因不能为空'
            } else if (!/^[\u4E00-\u9FA5]{1,30}$|^[A-Za-z]{1,60}$/.test(instance.inputValue)) {
              instance.editorErrorMessage = '说明原因最多30个汉字'
            } else {
              instance.editorErrorMessage = ''
              instance.confirmButtonLoading = true
              that.editRefund.comment = instance.inputValue
              editRefundStatus(that.editRefund).then(res => {
                instance.confirmButtonLoading = false
                if (res.status === 1) {
                  this.$message({
                    message: '取消退货成功',
                    type: 'success'
                  })
                  done()
                } else {
                  this.$message({
                    message: '取消退货失败',
                    type: 'error'
                  })
                }
              })
            }
          }
        }).then(({ value }) => {
          this.handleList()
        }).catch(() => {});
      },
      // 确认收货并退款
      confirmReceiptAndRefund (status) {
        this.editRefund.refund_status = status
        this.editRefund.comment = ''
        this.$confirm('是否已收货？', '确认收货并退款', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then((value) => {
          editRefundStatus(this.editRefund).then(res => {
            if (res.status === 1) {
              this.$message({
                message: '确认收货并退款成功',
                type: 'success'
              })
              this.handleList()
            } else {
              this.$message({
                message: '确认收货并退款失败',
                type: 'error'
              })
            }
          })
        }).catch(() => {})
      },
      // 查看物流信息
      showLogistics () {
        this.visible.logisticsForm = true
        this.visible.logisticsLoading = true
        this.logisticsList = []
        setTimeout(() => {
          this.visible.logisticsLoading = false
          this.logisticsList = [
            {title: '到达中国到达中国到达中国到达中国到达中国到达中国到达中国到达中国到达中国到达中国到达中国到达中国到达中国到达中国到达中国', time: '2017-12-12 12:12:45'},
            {title: '到达中国', time: '2017-12-12 12:12:45'},
            {title: '到达中国', time: '2017-12-12 12:12:45'},
            {title: '到达中国', time: '2017-12-12 12:12:45'},
            {title: '到达中国', time: '2017-12-12 12:12:45'},
            {title: '到达中国', time: '2017-12-12 12:12:45'},
            {title: '到达中国', time: '2017-12-12 12:12:45'},
            {title: '到达中国', time: '2017-12-12 12:12:45'},
            {title: '到达中国', time: '2017-12-12 12:12:45'},
            {title: '到达中国', time: '2017-12-12 12:12:45'}
          ];
        }, 1000)
      },
      // 测试状态
      testStatus () {
        this.visible.listLoading = true
        setTimeout(() => {
          this.refundDetail.refund.refund_type = 2
          this.refundDetail.refund_service_status = 4
          this.visible.listLoading = false
        }, 1000)
        return true
      }
    },
    mounted () {
      this.handleList()
    }
  };
</script>
<style lang="scss" scoped>
  .p-30 {
    padding: 30px !important;
  }
  .info-title{
    font-size: 18px;
    margin: 0;
    padding-bottom: 10px;
    border-bottom: 1px solid #DAD9DE;
    .info-col{
      margin: 28px 0;
    }
  }
  .logistics-list{
    display: block;
    width: 100%;
    box-sizing: border-box;
    border-left: 1px solid #ccc;
    li {
      display: block;
      float: left;
      width: 100%;
      margin-top: 15px;
      position: relative;
      &:first-child{
        p {color: #1d8ce0;}
        &::before {
          background-color: #1d8ce0;
        }
      }
      &::before {
        content: '';
        display: block;
        width: 16px;
        height: 16px;
        border-radius: 50%;
        background-color: #ccc;
        position: absolute;
        z-index: 2;
        left: -48px;
        top: 6px;
      }
      p {margin: 0}
      p.logistics-title {

      }
      p.logistics-time {
        color: #999;
      }
    }
  }
</style>
